<template>
  <Layout>
    <div class="fade-in" id="dashboardPage">
      <div class="flex items-center justify-between mb-8">
        <h2 class="text-2xl font-bold text-gray-800">控制台概览</h2>
        <div class="text-sm text-gray-600">
          <i class="far fa-clock mr-1"></i>
          最后更新: <span>{{ lastUpdate }}</span>
        </div>
      </div>

      <!-- 统计卡片 -->
      <div class="grid">
        <div v-for="stat in stats" :key="stat.title" class="stat-card">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium">{{ stat.title }}</p>
              <h3 class="text-3xl font-bold" :class="stat.color">{{ stat.value }}</h3>
            </div>
            <div :class="stat.iconBg" class="p-3 rounded-full">
              <i :class="stat.icon + ' ' + stat.iconColor + ' text-xl'"></i>
            </div>
          </div>
          <p class="text-sm text-gray-500 mt-2">
            <i class="fas fa-arrow-up text-green-500 mr-1"></i>
            {{ stat.change }}
          </p>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="chart-area">
        <div class="bg-white rounded-xl p-6 card">
          <h3 class="text-lg font-semibold">销售趋势</h3>
          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <p class="text-gray-500">图表区域</p>
          </div>
        </div>
        <div class="bg-white rounded-xl p-6 card">
          <h3 class="text-lg font-semibold">热门商品</h3>
          <div class="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
            <p class="text-gray-500">图表区域</p>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Layout from '../components/Layout.vue'
import { petService, productService, orderService } from '../services/api'

const lastUpdate = ref('刚刚')
const stats = ref([
  {
    title: '总订单数',
    value: '0',
    color: 'text-blue-600',
    icon: 'fas fa-shopping-bag',
    iconBg: 'bg-blue-100',
    iconColor: 'text-blue-600',
    change: '较上月增长 12%'
  },
  {
    title: '总销售额',
    value: '¥0',
    color: 'text-green-600',
    icon: 'fas fa-yuan-sign',
    iconBg: 'bg-green-100',
    iconColor: 'text-green-600',
    change: '较上月增长 8%'
  },
  {
    title: '宠物数量',
    value: '0',
    color: 'text-purple-600',
    icon: 'fas fa-paw',
    iconBg: 'bg-purple-100',
    iconColor: 'text-purple-600',
    change: '较上月增长 5%'
  },
  {
    title: '商品数量',
    value: '0',
    color: 'text-yellow-600',
    icon: 'fas fa-box',
    iconBg: 'bg-yellow-100',
    iconColor: 'text-yellow-600',
    change: '较上月增长 15%'
  }
])

onMounted(async () => {
  try {
    // 获取统计数据
    const [petsResponse, productsResponse, ordersResponse] = await Promise.all([
      petService.getAll(),
      productService.getAll(),
      orderService.getAll()
    ])

    // Extract data arrays and ensure they are arrays
    const pets = (petsResponse && Array.isArray(petsResponse.data)) ? petsResponse.data : [];
    const products = (productsResponse && Array.isArray(productsResponse.data)) ? productsResponse.data : [];
    const orders = (ordersResponse && Array.isArray(ordersResponse.data)) ? ordersResponse.data : []; // Assume orders API also uses pagination

    // 更新统计数据
    stats.value[0].value = orders.length;
    stats.value[1].value = `¥${orders.reduce((sum, order) => sum + (order.total_amount || 0), 0).toFixed(2)}`;
    stats.value[2].value = pets.length;
    stats.value[3].value = products.length;

    // 更新最后更新时间
    lastUpdate.value = new Date().toLocaleString()
  } catch (error) {
    console.error('Failed to fetch dashboard data:', error)
    // Initialize stats values to 0 on error
    stats.value.forEach(stat => stat.value = stat.title.startsWith('总销售额') ? '¥0' : '0');
  } finally {
    // TODO: Hide loading indicator if implemented
  }
})

// TODO: Implement chart data fetching and rendering
</script>

<style scoped>
/* 控制台页面内容区 */
#dashboardPage {
    /* 继承自 .page-content 的淡入动画 */
    animation: fadeIn 0.3s ease-out;
}

/* 统计卡片 */
.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); /* 渐变背景 */
    border: 1px solid rgba(0, 0, 0, 0.05); /* 轻微边框 */
    border-radius: 1rem; /* 圆角 */
    padding: 1.5rem; /* 内边距 */
    transition: transform 0.2s, box-shadow 0.2s; /* 过渡动画 */
}

/* 卡片悬停效果 */
.stat-card:hover { /* Changed from .card:hover to .stat-card:hover for specificity */
    transform: translateY(-5px); /* 向上浮动 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* 阴影加深 */
}

/* 数据卡片内的图标容器 */
.stat-card .p-3 {
    /* Background color will be set dynamically based on stat type */
    border-radius: 50%; /* 圆形 */
}

/* 统计数据网格 */
#dashboardPage .grid {
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 默认单列 */
    gap: 1.5rem; /* 间距 */
    display: grid; /* Ensure grid display */
}

/* 中屏设备：双列 */
@media (min-width: 768px) {
    #dashboardPage .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* 大屏设备：四列 */
@media (min-width: 1024px) {
    #dashboardPage .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* 统计数字 */
.stat-card .text-3xl {
    font-size: 1.875rem; /* 24px */
    font-weight: bold;
}

/* 统计标题 */
.stat-card .text-sm {
    font-size: 0.875rem; /* 14px */
    color: #718096; /* 灰色文字 */
}

/* 图表容器 */
.chart-area {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
  .chart-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bg-white.rounded-xl {
    background-color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* Add shadow to chart cards */
}

/* 图表标题 */
.bg-white.rounded-xl h3 {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    color: #2d3748; /* 深灰色文字 */
    margin-bottom: 1rem;
}

/* 图表占位区域 */
.bg-gray-50 {
    background-color: #f9fafb; /* 浅灰色背景 */
    height: 16rem; /* 图表高度 */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0aec0; /* 提示文字颜色 */
}

/* 统计卡片颜色（示例：蓝色卡片） */
.stat-card .text-blue-600 {
    color: #3b82f6; /* 蓝色文字 */
}

.stat-card .bg-blue-100 {
    background-color: #dbeafe; /* 浅蓝色背景 */
}

/* 其他颜色（绿色、紫色、黄色）类似定义 */
.stat-card .text-green-600 {
    color: #10b981; /* Green */
}

.stat-card .bg-green-100 {
    background-color: #d1fae5; /* Light Green */
}

.stat-card .text-purple-600 {
    color: #8b5cf6; /* Purple */
}

.stat-card .bg-purple-100 {
    background-color: #ede9fe; /* Light Purple */
}

.stat-card .text-yellow-600 {
    color: #f59e0b; /* Yellow */
}

.stat-card .bg-yellow-100 {
    background-color: #fef3c7; /* Light Yellow */
}

/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}
</style> 